<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>首页</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!--导航条-->
  <nav class="navbar navbar-default">
    <div class="container">
      <!-- 右边 -->
      <div class="navbar-header">
        <!-- 按钮 -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- logo -->
        <a class="navbar-brand" href="#" id="logo">潮流服装</a>
      </div>
      <!-- 搜索框 -->
      <form class="navbar-form navbar-right">
        <div class="input-group navbar-right">
          <input type="text" class="form-control" placeholder="请输入衣服名称">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">
              搜索
            </button>
          </span>
        </div>
      </form>
      <!-- 列表 -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#" class="a-first">首页</a></li>
          <li><a href="porduct.html">产品展示</a></li>
          <li><a href="art.html">技术展示</a></li>
          <li><a href="concerning.html">关于我们</a></li>
        </ul>
        
      </div>
    </div>
  </nav>

  <!--轮播图-->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 小圆点 -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- 图片 -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="./img/lun1.jpg" alt="">
      </div>
      <div class="item">
        <img src="./img/lun2.jpg" alt="">
      </div>
      <div class="item">
        <img src="./img/lun3.jpg" alt="">
      </div>
    </div>

    <!-- 切换按钮 -->
    <a class="left carousel-control lun-left" href="#carousel-example-generic" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control lun-right" href="#carousel-example-generic" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>

  <!-- 圆形图片 -->
  <div class="container">
    <h2 class="text-center subhead">服装分类</h2>
    <div class="row">
      <div class="col-md-3 col-xs-6 yuanxingtu">
        <img src="./img/dian1.webp" alt="" class="img-circle"><br>
        <small>衬衫</small>
      </div>
      <div class="col-md-3 col-xs-6 yuanxingtu">
        <img src="./img/dian2.webp" alt="" class="img-circle"><br>
        <small>外套</small>
      </div>
      <div class="col-md-3 col-xs-6 yuanxingtu">
        <img src="./img/dian3.webp" alt="" class="img-circle"><br>
        <small>连衣裙</small>
      </div>
      <div class="col-md-3 col-xs-6 yuanxingtu">
        <img src="./img/dian4.webp" alt="" class="img-circle"><br>
        <small>裤装</small>
      </div>
    </div>
  </div>

  <!-- 潮流前线 -->
  <div class="nav-chaofu">
    <div class="container">
      <h2 class="text-center subhead">潮流前线</h2>
      <div class="row">
        <div class="col-md-6 shen-img">
          <img src="./img/shen1.png.webp" alt="">
        </div>
        <div class="col-md-6 shen-img">
          <h4 class="shen-text">最新款式</h4>
          <p>新时代争做潮流女孩</p>
          <div class="suo">
            <img src="./img/shen2.jpg" alt="" class="xiao-tu">
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 选项卡切图 -->
  <div class="container xuan">
    <h2 class="text-center subhead">产品展示</h2>
    <!-- 选项卡 -->
    <div class="chan">
      <!-- 选项 -->
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#home" data-toggle="tab">清新长裙</a>
        </li>
        <li>
          <a href="#profile" data-toggle="tab">条纹上衣</a>
        </li>
        <li>
          <a href="#messages" data-toggle="tab">极致短袖</a>
        </li>
        <li>
          <a href="#settings" data-toggle="tab">更多新潮</a>
        </li>
      </ul>

      <!-- 图文 -->
      <div class="tab-content">
        <div class="tab-pane active fade in" id="home">
          <div class="row">
            <div class="col-md-3 col-xs-6 ">
              <div class="tab-tu">
                <img src="./img/qun1.jpg" alt="">
                <p>碎花长裙</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6 ">
              <div class="tab-tu">
                <img src="./img/qun2.jpg" alt="">
                <p>蓝色长裙</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6 ">
              <div class="tab-tu">
                <img src="./img/qun3.jpg" alt="">
                <p>花纹长裙</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6 ">
              <div class="tab-tu">
                <img src="./img/qun4.jpg" alt="">
                <p>黑色长裙</p>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade in" id="profile">
          <div class="row">
            <div class="col-md-3 col-xs-6 ">
              <div class="tab-tu">
                <img src="./img/tiao1.png" alt="">
                <p>棕白上衣</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6 ">
              <div class="tab-tu">
                <img src="./img/tiao2.jpg" alt="">
                <p>黑白上衣</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6 ">
              <div class="tab-tu">
                <img src="./img/tiao3.jpg" alt="">
                <p>黑绿上衣</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6 ">
              <div class="tab-tu">
                <img src="./img/tiao4.jpg" alt="">
                <p>黑棕上衣</p>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade in" id="messages">
          <div class="row">
            <div class="col-md-3 col-xs-6">
              <div class="tab-tu">
                <img src="./img/duan1.jpg" alt="">
                <p>粉色短袖</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6">
              <div class="tab-tu">
                <img src="./img/duan2.jpg" alt="">
                <p>精致短袖</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6">
              <div class="tab-tu">
                <img src="./img/duan3.jpg" alt="">
                <p>纹理短袖</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6">
              <div class="tab-tu">
                <img src="./img/duan4.jpg" alt="">
                <p>黑色短袖</p>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade in" id="settings">
          <div class="row">
            <div class="col-md-3 col-xs-6">
              <div class="tab-tu">
                <img src="./img/xin1.jpg" alt="">
                <p>运动套装</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6">
              <div class="tab-tu">
                <img src="./img/xin2.jpg" alt="">
                <p>潮流套装</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6">
              <div class="tab-tu">
                <img src="./img/xin3.jpg" alt="">
                <p>休闲套装</p>
              </div>
            </div>
            <div class="col-md-3 col-xs-6">
              <div class="tab-tu">
                <img src="./img/xin4.jpg" alt="">
                <p>正式套装</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>


  <!-- 服装选择 -->
  <div class="fuzhi" style=" background-color: #F5F7F9;">
    <div class="container">
      <h2 class="text-center subhead">购物通道</h2>
      <div class="row shop-row">
        <div class="col-xs-4  shop-ge">
          <div class="shop">
            <img src="./img/02.jpg" alt="">
            <div class="shop-tou">
              <h1>Men.</h1>
              <a href="javascript:void(0)">开始购物</a>
            </div>
          </div>
        </div>
        <div class="col-xs-4 shop-ge">
          <div class="shop">
            <img src="./img/01.jpg" alt="">
            <div class="shop-tou">
              <h1>Women.</h1>
              <a href="javascript:void(0)">开始购物</a>
            </div>
          </div>
        </div>
        <div class="col-xs-4 shop-ge">
          <div class="shop">
            <img src="./img/03.jpg" alt="">
            <div class="shop-tou">
              <h1>Kids</h1>
              <a href="javascript:void(0)">开始购物</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 技术展示 -->
  <div class="container-fluid fluid-jishu" style="padding: 0;">
    <h2 class="text-center subhead">技术展示</h2>
    <!-- 技术图文展示 -->
    <div class="row" style="margin: 0;">
      <div class="col-md-3 col-xs-6" style="padding: 0;">
        <div class="jishu">
          <img src="./img/jishu1.jpg" alt="">
          <div>
            <p>衣服定制</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-xs-6" style="padding: 0;">
        <div class="jishu">
          <img src="./img/jishu2.jpg" alt="">
          <div>
            <p>西装定制</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-xs-6" style="padding: 0;">
        <div class="jishu">
          <img src="./img/jishu3.jpg" alt="">
          <div>
            <p>量身定做</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-xs-6" style="padding: 0;">
        <div class="jishu">
          <img src="./img/jishu4.jpg" alt="">
          <div>
            <p>时尚设计</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 更多按钮 -->
    <div class="row" style="margin: 0;">
      <div class="col-xs-12 row-an">
        <div class="an-ji">

          <a href="javascript:void(0)">
            <span>更多展示</span>
          </a>
          <div></div>
        </div>
      </div>
    </div>
  </div>

  <!-- 版权 -->
  <div class="footer">
    <div class="container footer-quan">
      <p>版权所有<span class="glyphicon glyphicon-copyright-mark"></span>潮流服装 | bootstrap大作业 保留所有权</p>
    </div>
  </div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>

</html>